<template>
	<view class="content">
		<template v-for="(item, index) in list">
			<view class="card" :key="index" @click="goUrl">
				<view class="left">
					<view class="title">
						<text>案件编号：{{item.id}}</text>
					</view>
					<view class="title">
						<text>案件编号：<u-tag text="简易" type="success" shape="circle" v-if="item.type === 1"></u-tag>
					<u-tag text="一般" type="warning" shape="circle" v-if="item.type === 2"></u-tag>
					<u-tag text="重大" type="error" shape="circle" v-if="item.type === 3"></u-tag></text>
					</view>
				</view>
				<view class="right">
					<view class="state green" v-if="item.state === 1">已办理</view>
					<view class="state blue" v-if="item.state === 0">办理中</view>
					<view class="time">{{item.time}}</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					id: '立字〔2020〕5号',
					type: 1,
					state: 0,
					time: '2020-08-23'
				},{
					id: '立字〔2020〕5号',
					type: 2,
					state: 1,
					time: '2020-08-23'
				},{
					id: '立字〔2020〕5号',
					type: 3,
					state: 1,
					time: '2020-08-23'
				}]
			};
		},
		methods: {
			goUrl: function() {
				uni.navigateTo({
					url: '/pages/lawHistory/info'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		margin: 20rpx;
	}
.card {
	padding: 20rpx; background: #FFFFFF; border-radius: 10rpx; box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.06);
	display: flex; justify-content: space-between; align-items: center; margin-bottom: 30rpx;
	.left {
		.title {
			display: flex; align-items: center;
			&:nth-child(2) {
				margin-top: 10rpx;
			}
			text {
				margin-right: 10rpx; font-size: 28rpx;
			}
		}
		
	}
	.right {
		.state {
			&.green {
				color: #009000;
			}
			&.blue {
				color: #1893FC;
			}
		}
		.time {
			color: rgba($color: #000000, $alpha: 0.5); margin-top: 10rpx; font-size: 24rpx;
		}
	}
}
/deep/.u-tag {
	border: none !important;
}
</style>
